<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs[`bg${current}`]})`}">
    <view class="topic-wrapper">
      <view class="topic flex-between">
        <view class="num-wrapper">
          <text class="num">问题 {{current}}/ </text>{{max}}
        </view>
        <view class="time-wrapper flex-vc">
          <image :src="staticImgs.time" class="time"/>{{countTimeStr}}
        </view>
      </view>
      <image class="title" mode="widthFix" :src="staticImgs[`title${current}`] || staticImgs.title" />
    </view>
    <view class="opt-wrapper" :style="{transform: `scale(${scale})`}">
      <!--特殊选项-->
      <template v-if="current === 2">
        <swiper class="opt2swiper" :current="opt2Selected" @change="changeOpt2Swiper" easing-function="linear">
          <swiper-item :class="['opt2swiper-item', {current: index === opt2Selected, prev: index === opt2Selected - 1, next: index === opt2Selected + 1}]" v-for="(item, index) in optnList" :key="index">
            <image class="opt2img" :src="staticImgs[`option${current}${String.fromCharCode(97 + index)}`]" @click="selectAnswer(item, index)" />
          </swiper-item>
        </swiper>
        <view class="opt2btm" @click="selectAnswer(optnList[opt2Selected], opt2Selected)">
          <image class="opt" :src="staticImgs[`option${String.fromCharCode(65 + opt2Selected)}Selected`]" />
          <image class="text" :src="staticImgs[`text2${String.fromCharCode(97 + opt2Selected)}`]" mode="widthFix" />
        </view>
      </template>
      <template v-else-if="current === 10">
        <swiper class="opt10swiper" :current="opt10Selected" @change="changeOpt10Swiper" previous-margin="140rpx" next-margin="140rpx" easing-function="linear">
          <swiper-item :class="['opt10swiper-item', {current: index === opt10Selected, prev: index === opt10Selected - 1, next: index === opt10Selected + 1}]" v-for="(item, index) in optnList" :key="index">
            <view class="opt10img-wrapper" @click="selectAnswer10(item, index)">
              <image class="opt10" :src="staticImgs[index === opt10Selected ?  `option${String.fromCharCode(65 + index)}Selected` : `option${String.fromCharCode(65 + index)}`]" />
              <image class="opt10img" :src="staticImgs[`option${current}${String.fromCharCode(97 + index)}`]" />
            </view>
          </swiper-item>
        </swiper>
      </template>
      <!--一般选项-->
      <template v-else>
        <view
            v-for="(item, index) in optnList"
            :class="['opt-item', `opt${current}${String.fromCharCode(97 + index)}`, {zoom: item.select === '1', noanswered}]"
            :key="index"
        >
          <view class="img" v-if="current === 4" :key="`${index}img4`">
            <image class="front-img" :src="staticImgs[`option${current}${String.fromCharCode(97 + index)}`]" @click.stop="selectAnswer(item, index)" />
            <image class="back-img" :src="staticImgs[`option${current}${String.fromCharCode(97 + index)}`]" @click.stop="selectAnswer(item, index)" />
          </view>
          <image v-else class="img" :src="staticImgs[`option${current}${String.fromCharCode(97 + index)}`]" @click.stop="current === 3 || current === 6 || current === 8 ? null : selectAnswer(item, index)" />
          <image class="opt" :src="staticImgs[item.select === '1' ? `option${String.fromCharCode(65 + index)}Selected` : `option${String.fromCharCode(65 + index)}`]" @click.stop="selectAnswer(item, index)" />
          <image class="text" :src="staticImgs[`text${current}${String.fromCharCode(65 + index)}`] || staticImgs[`text${String.fromCharCode(65 + index)}`]" v-if="current === 3 || current === 4" @click.stop="selectAnswer(item, index)" />
        </view>
        <!--点击-->
        <template v-if="current === 3 || current === 6 || current === 8">
          <view
              v-for="(item, index) in optnList"
              :class="['click-view', `click-view${current}${String.fromCharCode(97 + index)}`, {zoom: item.select === '1'}]"
              :key="index"
              @click.stop="selectAnswer(item, index)"
          />
        </template>
      </template>
    </view>
    <view class="btm flex-between">
      <image
          class="btm-btn"
          :src="staticImgs.prev"
          @click="$emit('prev')"
      />
      <image
          class="btm-btn directory"
          :src="staticImgs.directory"
          @click="$emit('go')"
      />
      <image
          class="btm-btn"
          :src="max === current ? staticImgs.submit : staticImgs.next"
          @click="next"
      />
    </view>
  </view>
</template>

<script>
  let clockTimer;

  export default {
    props:{
      max: {
        type: Number,
        default: 0
      },
      current: {
        type: Number,
        default: 0
      },
      countTime: {
        type: String,
        default: ''
      },
      optnList: {
        type: Array,
        default: () => []
      },
      question: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        staticImgs: {
          bg1: this.imgBaseURL + '/scl/question-page/queen/bg1.png',
          bg2: this.imgBaseURL + '/scl/question-page/queen/bg2.png',
          bg3: this.imgBaseURL + '/scl/question-page/queen/bg3.png',
          bg4: this.imgBaseURL + '/scl/question-page/queen/bg4.png',
          bg5: this.imgBaseURL + '/scl/question-page/queen/bg5.png',
          bg6: this.imgBaseURL + '/scl/question-page/queen/bg6.png',
          bg7: this.imgBaseURL + '/scl/question-page/queen/bg7.png',
          bg8: this.imgBaseURL + '/scl/question-page/queen/bg8.png',
          bg9: this.imgBaseURL + '/scl/question-page/queen/bg9.png',
          bg10: this.imgBaseURL + '/scl/question-page/queen/bg10.png',
          title: this.imgBaseURL + '/scl/question-page/queen/title.png',
          title1: this.imgBaseURL + '/scl/question-page/queen/title1.png',
          title3: this.imgBaseURL + '/scl/question-page/queen/title3.png',
          title4: this.imgBaseURL + '/scl/question-page/queen/title4.png',
          title6: this.imgBaseURL + '/scl/question-page/queen/title6.png',
          title10: this.imgBaseURL + '/scl/question-page/queen/title10.png',
          prev: this.imgBaseURL + '/scl/question-page/queen/prev.png',
          directory: this.imgBaseURL + '/scl/question-page/queen/directory.png',
          next: this.imgBaseURL + '/scl/question-page/queen/next.png',
          submit: this.imgBaseURL + '/scl/question-page/queen/submit.png',
          time: this.imgBaseURL + '/scl/question-page/queen/time.png',
          optionA: this.imgBaseURL + '/scl/question-page/queen/a.png',
          optionB: this.imgBaseURL + '/scl/question-page/queen/b.png',
          optionC: this.imgBaseURL + '/scl/question-page/queen/c.png',
          optionASelected: this.imgBaseURL + '/scl/question-page/queen/a_selected.png',
          optionBSelected: this.imgBaseURL + '/scl/question-page/queen/b_selected.png',
          optionCSelected: this.imgBaseURL + '/scl/question-page/queen/c_selected.png',
          option1a: this.imgBaseURL + '/scl/question-page/queen/1a.png',
          option1b: this.imgBaseURL + '/scl/question-page/queen/1b.png',
          option1c: this.imgBaseURL + '/scl/question-page/queen/1c.png',
          option2a: this.imgBaseURL + '/scl/question-page/queen/2a.png',
          option2b: this.imgBaseURL + '/scl/question-page/queen/2b.png',
          option2c: this.imgBaseURL + '/scl/question-page/queen/2c.png',
          option3a: this.imgBaseURL + '/scl/question-page/queen/3a.png',
          option3b: this.imgBaseURL + '/scl/question-page/queen/3b.png',
          option3c: this.imgBaseURL + '/scl/question-page/queen/3c.png',
          option4a: this.imgBaseURL + '/scl/question-page/queen/4a.png',
          option4b: this.imgBaseURL + '/scl/question-page/queen/4b.png',
          option4c: this.imgBaseURL + '/scl/question-page/queen/4c.png',
          option5a: this.imgBaseURL + '/scl/question-page/queen/5a.png',
          option5b: this.imgBaseURL + '/scl/question-page/queen/5b.png',
          option5c: this.imgBaseURL + '/scl/question-page/queen/5c.png',
          option6a: this.imgBaseURL + '/scl/question-page/queen/6a.png',
          option6b: this.imgBaseURL + '/scl/question-page/queen/6b.png',
          option6c: this.imgBaseURL + '/scl/question-page/queen/6c.png',
          option7a: this.imgBaseURL + '/scl/question-page/queen/7a.png',
          option7b: this.imgBaseURL + '/scl/question-page/queen/7b.png',
          option7c: this.imgBaseURL + '/scl/question-page/queen/7c.png',
          option8a: this.imgBaseURL + '/scl/question-page/queen/8a.png',
          option8b: this.imgBaseURL + '/scl/question-page/queen/8b.png',
          option9a: this.imgBaseURL + '/scl/question-page/queen/9a.png',
          option9b: this.imgBaseURL + '/scl/question-page/queen/9b.png',
          option9c: this.imgBaseURL + '/scl/question-page/queen/9c.png',
          option10a: this.imgBaseURL + '/scl/question-page/queen/10a.png',
          option10b: this.imgBaseURL + '/scl/question-page/queen/10b.png',
          option10c: this.imgBaseURL + '/scl/question-page/queen/10c.png',
          textA: this.imgBaseURL + '/scl/question-page/queen/texta.png',
          textB: this.imgBaseURL + '/scl/question-page/queen/textb.png',
          textC: this.imgBaseURL + '/scl/question-page/queen/textc.png',
          text2a: this.imgBaseURL + '/scl/question-page/queen/text2a.png',
          text2b: this.imgBaseURL + '/scl/question-page/queen/text2b.png',
          text2c: this.imgBaseURL + '/scl/question-page/queen/text2c.png'
        },
        countTimeStr: '',
        startDateTime: 0,
        opt2Selected: 0,
        opt10Selected: 1,
        // 是否回答
        noanswered: false,
        // 动画是否结束
        animatenotend: false,
        scale: 1,
        windowResizeCallback: null,
        timeout: null
      }
    },
    watch: {
      countTime(val) {
        if (val) {
          this.countTimeStr = val
        }
      },
      current: {
        immediate: true,
        handler(val) {
          this.animatenotend = false
          clearTimeout(this.timeout)
          this.timeout = null
          this.noanswered = false
          if (val === 2) {
            const index = this.optnList.findIndex(item => item.select === '1')
            this.opt2Selected = index > 0 ? index : 0
          } else if (val === 10) {
            const index = this.optnList.findIndex(item => item.select === '1')
            this.opt10Selected = index > 0 ? index : 1
          }
          // 是否回答
          this.noanswered = this.optnList.findIndex(item => item.select === '1') < 0
          // 动画是否结束
          if (this.noanswered) {
            if (this.current === 1) {
              this.animatenotend = true
              this.timeout = setTimeout(() => this.animatenotend = false, 900)
            } else if (this.current === 3 || this.current === 4) {
              this.animatenotend = true
              this.timeout = setTimeout(() => this.animatenotend = false, 1500)
            } else if (this.current === 7) {
              this.animatenotend = true
              this.timeout = setTimeout(() => this.animatenotend = false, 1800)
            } else if (this.current === 8) {
              this.animatenotend = true
              this.timeout = setTimeout(() => this.animatenotend = false, 1200)
            }
          }
        }
      }
    },
    mounted() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(() => {
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      }, 1000)
      this.getScale(uni.getSystemInfoSync().windowHeight)
      this.windowResizeCallback = res => this.getScale(res.size.windowHeight)
      uni.onWindowResize(this.windowResizeCallback)
    },
    beforeDestroy() {
      uni.offWindowResize(this.windowResizeCallback)
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
      clearInterval(clockTimer)
    },
    methods:{
      selectAnswer(item, index) {
        // 动画未结束不可点击
        if ((this.current === 1 || this.current === 3 || this.current === 4 || this.current === 7 || this.current === 8) && this.animatenotend) {
          return
        }
        this.$emit('updateSelectSclQuestion', index)
      },
      next() {
        if (this.current === 2) {
          this.$emit('updateSelectSclQuestion', this.opt2Selected)
        } else if (this.current === 10) {
          this.$emit('updateSelectSclQuestion', this.opt10Selected, undefined, null)
        } else {
          this.$emit('next')
        }
      },
      changeOpt2Swiper(event) {
         this.opt2Selected = event.detail.current
      },
      changeOpt10Swiper(event) {
        this.opt10Selected = event.detail.current
      },
      getScale(windowHeight) {
        this.$nextTick(() => {
          if (windowHeight < uni.upx2px(1624)) {
            this.scale = (windowHeight - uni.upx2px(560)) / uni.upx2px(1024)
          }
        })
      },
      selectAnswer10(item, index) {
        uni.$u.throttle(() => {
          this.opt10Selected = index
          this.selectAnswer(item, index)
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
@keyframes leftShow {
  0% {
    transform: translateX(-200rpx);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rightShow {
  0% {
    transform: translateX(200rpx);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes leftZoomShow {
  0% {
    transform: translateX(-200rpx) scale(1.23);
    opacity: 0;
  }

  100% {
    transform: translateX(0) scale(1.23);
    opacity: 1;
  }
}

@keyframes rightZoomShow {
  0% {
    transform: translateX(200rpx) scale(1.23);
    opacity: 0;
  }

  100% {
    transform: translateX(0) scale(1.23);
    opacity: 1;
  }
}

@keyframes move {
  0%, 100% {
    transform: translateY(30rpx);
  }

  50% {
    transform: translateY(-30rpx);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rightInto {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes leftInto {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes turn180 {
  0% {
    opacity: 1;
    transform: rotateY(180deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0);
  }
}

.container {
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topic-wrapper {
  flex: 0 0 auto;
}

.topic {
  padding: 155rpx 77rpx 29rpx;
}

.num-wrapper {
  font-weight: bold;
  font-size: 26rpx;
  color: #FFF;
  display: flex;
  align-items: flex-end;

  .num {
    font-size: 40rpx;
  }
}

.time-wrapper {
  font-weight: bold;
  font-size: 30rpx;
  color: #FFF;

  .time {
    width: 36rpx;
    height: 36rpx;
    margin-right: 9rpx;
  }
}

.title {
  width: 607rpx;
  display: block;
  margin: 0 auto;
}

.opt-wrapper {
  flex: 1 0 auto;
  position: relative;
  transform-origin: center top;

  .opt-item {
    position: absolute;
    transition: transform 0.3s linear;

    .img {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;

      .front-img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        z-index: 2;
        transform: rotateY(0);
      }

      .back-img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        z-index: 1;
        transform: rotateY(180deg);
      }
    }

    .opt {
      position: absolute;
      width: 84rpx;
      height: 84rpx;
      z-index: 3;
    }

    .text {
      position: absolute;
      z-index: 3;
    }

    // 选项位置
    &.opt1a {
      top: 0;
      left: 57rpx;
      width: 260rpx;
      height: 480rpx;

      &.noanswered {
        opacity: 0;
        animation: leftShow 0.3s linear forwards;
      }

      .opt {
        top: 126rpx;
        left: -13rpx;
      }

      &.zoom {
        transform: scale(1.23);
      }
    }

    &.opt1b {
      top: 111rpx;
      right: 86rpx;
      width: 260rpx;
      height: 480rpx;

      &.noanswered {
        opacity: 0;
        animation: rightShow 0.3s linear 0.3s forwards;
      }

      .opt {
        top: 174rpx;
        right: -20rpx;
      }

      &.zoom {
        transform: scale(1.23);
      }
    }

    &.opt1c {
      left: 202rpx;
      top: 529rpx;
      width: 260rpx;
      height: 480rpx;
      &.noanswered {
        opacity: 0;
        animation: leftShow 0.3s linear 0.6s forwards;
      }

      .opt {
        top: 146rpx;
        right: -23rpx;
      }

      &.zoom {
        transform: scale(1.23);
      }
    }

    &.opt3a {
      left: 55rpx;
      top: 0;
      width: 640rpx;
      height: 535rpx;

      &.noanswered {
        opacity: 0;
        animation: leftShow 0.5s linear forwards;
      }

      .opt {
        top: 82rpx;
        right: 118rpx;
      }

      .text {
        top: 95rpx;
        right: -21rpx;
        width: 144rpx;
        height: 65rpx;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.2);
      }
    }

    &.opt3b {
      right: 8rpx;
      top: 260rpx;
      width: 620rpx;
      height: 520rpx;

      &.noanswered {
        opacity: 0;
        animation: rightShow 0.5s linear 0.5s forwards;
      }

      .opt {
        top: 167rpx;
        left: -83rpx;
      }

      .text {
        top: 182rpx;
        left: 14rpx;
        width: 154rpx;
        height: 50rpx;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.2);
      }
    }

    &.opt3c {
      left: 37rpx;
      top: 510rpx;
      width: 620rpx;
      height: 520rpx;

      &.noanswered {
        opacity: 0;
        animation: leftShow 0.5s linear 1s forwards;
      }

      .opt {
        bottom: 18rpx;
        left: 258rpx;
      }

      .text {
        top: 430rpx;
        left: 355rpx;
        width: 154rpx;
        height: 50rpx;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.2);
      }
    }

    &.opt4a {
      left: 0;
      top: 215rpx;
      width: 436rpx;
      height: 600rpx;

      .opt {
        top: -36rpx;
        left: 72rpx;
      }

      .text {
        left: 183rpx;
        top: -21rpx;
        width: 144rpx;
        height: 65rpx;
      }

      &.noanswered .img {
        opacity: 0;
        transform: rotateY(180deg);
        animation: turn180 0.5s linear forwards;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.1);
      }
    }

    &.opt4b {
      right: 0;
      top: 50rpx;
      width: 436rpx;
      height: 600rpx;

      .opt {
        left: 93rpx;
        top: -50rpx;
      }

      .text {
        left: 204rpx;
        top: -34rpx;
        width: 154rpx;
        height: 50rpx;
      }

      &.noanswered .img {
        opacity: 0;
        transform: rotateY(180deg);
        animation: turn180 0.5s linear 0.5s forwards;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.1);
      }
    }

    &.opt4c {
      right: 0;
      top: 580rpx;
      width: 436rpx;
      height: 600rpx;

      .opt {
        top: 258rpx;
        left: -221rpx;
      }

      .text {
        top: 273rpx;
        left: -110rpx;
        width: 154rpx;
        height: 50rpx;
      }

      &.noanswered .img {
        opacity: 0;
        transform: rotateY(180deg);
        animation: turn180 0.5s linear 1s forwards;
      }

      &.zoom .img, &.zoom .opt {
        transform: scale(1.1);
      }
    }

    &.opt5a {
      left: 65rpx;
      top: 100rpx;
      width: 325rpx;
      height: 245rpx;
      animation: move 4.5s linear infinite;

      .opt {
        left: 113rpx;
        top: -29rpx;
      }
    }

    &.opt5b {
      right: 75rpx;
      top: 240rpx;
      width: 325rpx;
      height: 245rpx;
      animation: move 5s linear infinite;

      .opt {
        left: 113rpx;
        top: -42rpx;
      }
    }

    &.opt5c {
      top: 460rpx;
      left: 165rpx;
      width: 325rpx;
      height: 245rpx;
      animation: move 5.5s linear infinite;

      .opt {
        left: 113rpx;
        top: -23rpx;
      }
    }

    &.opt6a {
      right: 0;
      top: 0;
      width: 500rpx;
      height: 500rpx;
      animation: move 3s linear infinite;

      .opt {
        left: 200rpx;
        top: 150rpx;
      }
    }

    &.opt6b {
      left: 20rpx;
      top: 250rpx;
      width: 500rpx;
      height: 500rpx;
      animation: move 3.5s linear infinite;

      .opt {
        left: 170rpx;
        top: 150rpx;
      }
    }

    &.opt6c {
      right: 80rpx;
      top: 633rpx;
      width: 500rpx;
      height: 500rpx;
      animation: move 4s linear infinite;

      .opt {
        left: 180rpx;
        top: 150rpx;
      }
    }

    &.opt7a {
      left: 42rpx;
      top: 68rpx;
      width: 690rpx;
      height: 208rpx;
      
      &.noanswered {
        opacity: 0;
        animation: fadeIn 0.6s linear forwards;
      }

      .opt {
        left: -7rpx;
        top: 89rpx;
      }
    }

    &.opt7b {
      left: 42rpx;
      top: 326rpx;
      width: 690rpx;
      height: 208rpx;

      &.noanswered {
        opacity: 0;
        animation: fadeIn 0.6s linear 0.6s forwards;
      }

      .opt {
        left: -7rpx;
        top: 89rpx;
      }
    }

    &.opt7c {
      left: 42rpx;
      top: 584rpx;
      width: 690rpx;
      height: 208rpx;
      
      &.noanswered {
        opacity: 0;
        animation: fadeIn 0.6s linear 1.2s forwards;
      }

      .opt {
        left: -7rpx;
        top: 89rpx;
      }
    }

    &.opt8a {
      left: 240rpx;
      top: 30rpx;
      width: 760rpx;
      height: 780rpx;

      &.noanswered {
        animation: rightInto 0.6s linear;
      }

      .opt {
        left: 205rpx;
        top: 165rpx;
      }
    }

    &.opt8b {
      left: -220rpx;
      top: 460rpx;
      width: 760rpx;
      height: 760rpx;

      &.noanswered {
        animation: leftInto 0.6s linear;
      }

      .opt {
        left: 458rpx;
        top: 155rpx;
      }
    }

    &.opt9a {
      left: 280rpx;
      top: 210rpx;
      width: 460rpx;
      height: 100rpx;
      animation: move 4.5s linear infinite;

      .opt {
        left: 190rpx;
        top: -110rpx;
      }
    }

    &.opt9b {
      left: 20rpx;
      top: 410rpx;
      width: 460rpx;
      height: 100rpx;
      animation: move 5s linear infinite;

      .opt {
        left: 180rpx;
        top: -100rpx;
      }
    }

    &.opt9c {
      left: 170rpx;
      top: 700rpx;
      width: 475rpx;
      height: 100rpx;
      animation: move 5.5s linear infinite;

      .opt {
        left: 190rpx;
        top: -100rpx;
      }
    }
  }

  .click-view {
    position: absolute;

    &.click-view3a {
      width: 560rpx;
      height: 560rpx;
      top: 100rpx;
      left: 50rpx;
      border-radius: 50%;
      clip-path: polygon(0% 0%, 0% 30%, 50% 50%, 100% 30%, 100% 0%, 0% 0%);
      transform: rotate(20deg);

      &.zoom {
        transform: translate(10rpx, 20rpx) rotate(20deg) scale(1.2);
      }
    }

    &.click-view3b {
      width: 650rpx;
      height: 650rpx;
      position: absolute;
      top: 346rpx;
      left: 170rpx;
      border-radius: 50%;
      clip-path: polygon(0% 0%, 0% 30%, 50% 50%, 100% 30%, 100% 0%, 0% 0%);
      transform: rotate(-33deg);

      &.zoom {
        transform: translate(10rpx, 30rpx) rotate(-33deg) scale(1.2);
      }
    }

    &.click-view3c {
      width: 580rpx;
      height: 580rpx;
      position: absolute;
      top: 590rpx;
      left: 0;
      border-radius: 50%;
      clip-path: polygon(0% 0%, 0% 40%, 50% 50%, 100% 40%, 100% 0%, 0% 0%);
      transform: rotate(28deg);

      &.zoom {
        transform: translate(0, 30rpx) rotate(28deg) scale(1.2);
      }
    }

    &.click-view6a {
      width: 365rpx;
      height: 365rpx;
      position: absolute;
      top: 40rpx;
      left: 320rpx;
      border-radius: 50%;
    }

    &.click-view6b {
      width: 365rpx;
      height: 365rpx;
      position: absolute;
      top: 300rpx;
      left: 60rpx;
      border-radius: 50%;
    }

    &.click-view6c {
      width: 365rpx;
      height: 365rpx;
      position: absolute;
      top: 670rpx;
      left: 220rpx;
      border-radius: 50%;
    }

    &.click-view8a {
      width: 410rpx;
      height: 425rpx;
      position: absolute;
      top: 110rpx;
      left: 280rpx;
      border-radius: 50%;
    }

    &.click-view8b {
      width: 410rpx;
      height: 425rpx;
      position: absolute;
      top: 530rpx;
      left: 70rpx;
      border-radius: 50%;
    }
  }

  .opt2swiper {
    height: 800rpx;
    width: 100%;
    margin-top: 120rpx;
  }

  .opt2swiper-item {
    overflow: visible;

    &.prev .opt2img {
      transform: translateX(370rpx) scale(0.75);
    }

    &.next .opt2img {
      transform: translateX(-370rpx) scale(0.75);
    }

    &.current {
      transform: none;
    }
  }

  .opt2img {
    width: 100%;
    height: 800rpx;
    transition: all 0.5s ease;
  }

  .opt2btm {
    width: 472rpx;
    top: 827rpx;
    margin: 25rpx auto 0;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;

    .text {
      width: 472rpx;
      margin: 20rpx auto 0;
      display: block;
    }

    .opt {
      width: 84rpx;
      height: 84rpx;
      margin: 0 auto;
      display: block;
    }
  }

  .opt10swiper {
    height: 650rpx;
    width: 420rpx;
    margin: 180rpx auto 0;
    overflow: visible;
  }

  .opt10swiper-item {
    width: 140rpx;
    overflow: visible;

    &.prev .opt10img {
      transform: scaleY(0.75);
    }

    &.next .opt10img {
      transform: scaleY(0.75);
    }

    &.prev .opt10 {
      transform: scale(0.75);
    }

    &.next .opt10 {
      transform: scale(0.75);
    }

    &.current {
      transform: none;
    }
  }

  .opt10img-wrapper {
    width: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500rpx;
    position: relative;
    overflow: visible;
  }

  .opt10img {
    width: 100rpx;
    height: 360rpx;
    margin-top: 120rpx;
  }

  .opt10 {
    position: absolute;
    width: 84rpx;
    height: 84rpx;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

.btm {
  flex: 0 0 auto;
  padding: 0 37rpx 50rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(50rpx + env(safe-area-inset-bottom));

  .btm-btn {
    width: 200rpx;
    height: 90rpx;
    margin: 0 9rpx;

    &.directory {
      width: 240rpx;
    }
  }
}
</style>